<template>
    <div class="card-box">
      <PubTable
        :tableData="crudData"
        :uploadUrl="uploadUrl"
        @selected-items="getSelection"
      />
    </div>
  </template>
  
  <script lang="jsx" setup>
  defineOptions({ name: "deviceList" });
  import "@/components/PubTable/style/pubTablecss.scss";
  import {
    tableData as mockData,
    caserData,
  } from "@/components/PubTable/utils/mockData.js";
  import { ref, reactive, getCurrentInstance, onMounted } from "vue";
  let { proxy } = getCurrentInstance();
  import { useRouter } from "vue-router";
  const router = useRouter();
  const isDetail = ref(false);
  
  //全局数据配置
  const crudData = ref({
    clums: [
      {
        type: "selection",
        width: 40,
        label: "复选框",
        fixed: "left",
      },
      {
        type: "index",
        props: "index",
        label: "序号",
        width: 80,
        fixed: "left",
      },
      {
        props: "value1",
        label: "设备状态",
        render: (scope) => {
            return (
              <>
                <el-link
                >
                  {scope.row.value1}
                </el-link>
              </>
            );
        },
      },
      {
        props: "productName",
        label: "设备名称",
        search: {
          key: "productName",
          type: "input",
          placeholder: "搜索设备名称",
          minWidth: "200px",
          clearable: true,
          maxLength: 20,
        },
      },
      {
        props: "value2",
        label: "地址码",
      },
      {
        props: "value3",
        label: "连网类型",
        minWidth: "100px",
        search: {
          key: "value3",
          type: "select",
          placeholder: "连网类型",
          clearable: true,
          maxLength: 20,
          optionList: [
            {
              label: "已完成",
              value: 1,
            },
            {
              label: "未完成",
              value: 0,
            },
          ],
        },
      },
      {
        props: "value4",
        label: "所属产品",
      },
      {
        props: "updateTime",
        label: "创建时间",
        minWidth: "100px",
        search: {
          key: "updateTime",
          type: "timerange",
          startPlaceholder: "选择创建时间",
          endPlaceholder: "选择创建时间",
          separator: "至",
          clearable: true,
          maxLength: 20,
          timeFormatter: "YYYY-MM-DD HH:mm:ss",
        },
      },
      {
        props: "caozuo",
        label: "操作",
        width: 150,
        fixed: "right",
        render: (scope) => {
          return (
            <>
              <span
                class="p-table-btn p-table-btn-b"
                onClick={() => {
                  router.push({
                    path: "/deviceListDetail",
                    query: {
                      id: "aa",
                    },
                  });
                }}
              >
                详情
              </span>
              <span
                class="p-table-btn p-table-btn-b"
                onClick={async () => {
                  crudData.value.form.formName = "编辑";
  
                  crudData.value.form.formList = crudData.value.form.formList.map(
                    (item) => {
                      item.value = scope.row[item.key] || null;
                      return item;
                    }
                  );
  
                  crudData.value.form.formShow = true;
                }}
              >
                编辑
              </span>
              <span
                class="p-table-btn p-table-btn-r"
                onClick={() => {
                  ElMessageBox.confirm(
                    "删除后系统无法恢复，确认删除吗?",
                    "信息提示",
                    {
                      confirmButtonText: "确认",
                      cancelButtonText: "取消",
                      customClass: "public-message-box-default",
                    }
                  ).then(() => {
                    //删除逻辑
                  });
                }}
              >
                删除
              </span>
            </>
          );
        },
      },
    ],
    handleBtns: [
      {
        text: "删除",
        onClick: () => {
          if (selectTion.length) {
            ElMessageBox.confirm("删除后系统无法恢复，确认删除吗?", "信息提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              customClass: "public-message-box-default",
            }).then(() => {
              //删除逻辑
            });
          }else{
              ElMessage.warning("请选择要删除的数据");
              return
          }
        },
      },
      {
        text: "添加",
        onClick: () => {
          crudData.value.form.formName = "添加";
          crudData.value.form.formList = crudData.value.form.formList.map(
            (item) => {
              if (item.type == "multSelect") {
                item.value = [];
              } else {
                item.value = null;
              }
              return item;
            }
          );
          crudData.value.form.formShow = true;
  
          // showAdd.value = true;
        },
      },
    ],
    // sortRule 默认排序规则,排序字段prop在 clums中加上sortable
    sortRule: { prop: "value3", order: "descending" }, // prop: 'value3', order: 'descending'||'ascending'
    // data 获取数据getTableData
    data: mockData,
    // pager 分页配置
    pager: {
      total: 11,
      pageIndex: 1,
      pageSize: 10,
      pagerLang: [10, 20, 50, 100],
      sizeChange: (e) => {
        // 改变每页条数
        crudData.value.pager.pageSize = e;
        crudData.value.pager.pageIndex = 1;
        getTableData();
      },
      pageIndexChange: (e) => {
        // 改变页码
        crudData.value.pager.pageIndex = e;
        getTableData();
      },
    },
    // form 弹窗配置 可自定义或直接配置
    form: {
      formName: "添加",
      formShow: false,
      formList: [
        {
          key: "productName",
          type: "input",
          label: "设备名称",
          placeholder: "请输入设备名称",
          maxLength: 20,
          validate: [
            {
              required: true,
              message: "请输入设备名称",
              trigger: "blur",
            },
          ],
        },
        {
          key: "value6",
          type: "select",
          label: "通信方式",
          placeholder: "请选择通信方式",
          validate: [
            {
              required: true,
              message: "请选择通信方式",
              trigger: "change",
            },
          ],
          optionList: [
            {
              label: "1",
              value: 0,
            },
            {
              label: "2",
              value: 1,
            },
            {
              label: "3",
              value: 2,
            },
          ],
        },
        {
          key: "value6",
          type: "select",
          label: "波特率",
          placeholder: "请选择波特率",
          validate: [
            {
              required: true,
              message: "请选择波特率",
              trigger: "change",
            },
          ],
          optionList: [
            {
              label: "1",
              value: 0,
            },
            {
              label: "2",
              value: 1,
            },
            {
              label: "3",
              value: 2,
            },
          ],
        },
      ],
      handelFormShow: (name, flag) => {
        crudData.value.form.formName = name;
        crudData.value.form.formShow = flag;
      },
      handelSubmit: (data) => {
        if (crudData.value.form.formName == "添加") {
          //添加
          console.log("添加", data);
        } else {
          //编辑
          console.log("编辑", data);
        }
        //此处需要在使用完data后，再将弹窗关闭，否则data数据将被重置
        crudData.value.form.formShow = false;
      },
    },
    //查询参数回调
    searchCb: (e) => {
      console.log("searchCb", e);
      getTableData(e);
    },
    //重置回调
    reset: (e) => {
      console.log("reset", e);
      getTableData();
    },
  });
  
  const getTableData = (e) => {
    console.log("getTableData", e);
  };
  
  onMounted(() => {
    getTableData();
  });
  
  const uploadUrl = ref("/api/alarmPush/import");
  var selectTion = reactive([]);
  const getSelection = (val) => {
    selectTion = val;
    console.log("选中", selectTion);
  };
  </script>
  
  <style lang="scss" scoped></style>
  